<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改文物管理')" />
<!--     <th:block th:include="include :: bootstrap-fileinput-css" /> -->
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-exhibit-edit" th:object="${exhibit}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label  is-required">文物名：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文物类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" class="form-control m-b" th:with="type=${@exhibitType.getType()}">
                        <option th:each="eh : ${type}" th:text="${eh.name}" th:value="${eh.id}" th:field="*{typeId}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">3D链接：</label>
                <div class="col-sm-8">
                    <textarea name="url" class="form-control">[[*{url}]]</textarea>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">所属博物馆：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="museum" th:field="*{museum}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">描述信息：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
<!--             <div class="form-group">     -->
<!--                 <label class="col-sm-3 control-label is-required">是否展示：</label> -->
<!--                 <div class="col-sm-8"> -->
<!--                     <input name="isShow" th:field="*{isShow}" class="form-control" type="text"> -->
<!--                 </div> -->
<!--             </div> -->
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">是否重点文物：</label>
                <div class="col-sm-8">
                    <input name="isImportant" th:field="*{isImportant}" class="form-control" type="text">
                </div>
            </div>
			<div class="form-group">
		        <label class="col-sm-3 control-label is-required">图片：</label>
				<div class="col-sm-8">
					<div class="file-loading">
						<input id="exhibitFile" type="file" class="file" name="file" data-min-file-count="1" data-theme="fas" multiple>
					</div>
				</div>
			</div>
			<div class="form-group">
		    	<label class="col-sm-3 control-label"></label>
				<div class="col-sm-8">
					<div class="file-loading">
						<img id="img" th:src="*{img}" style="width: 60%; height:60%;">
					</div>
				</div>
			</div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
<!--     <th:block th:include="include :: bootstrap-fileinput-js" /> -->
    <script th:inline="javascript">
        
        var prefix = ctx + "museum/exhibit";
        

		$(document).ready(function () {
			$("#exhibitFile").change(function(){   
			    var file = this.files[0];
			    if (window.FileReader) {    
			       var reader = new FileReader();    
			       reader.readAsDataURL(file);    
			     reader.onloadend = function (e) {
			       $("#img").attr("src", e.target.result)
			       };    
			    } 
			});
		});
		$("#form-exhibit-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
        	if ($.validate.form()) {
	            var formdata = new FormData($("#form-exhibit-edit")[0]);
	            $.ajax({
	                url: prefix + "/edit",
	                data: formdata,
	                type: "post",
	                processData: false,
	                contentType: false,
	                success: function(result) {
	                    $.operate.saveSuccess(result);
	                }
	            })
        	}
        }
    </script>
</body>
</html>